<template>
    <div >
        <!--        搜索表单-->
        <el-form :inline="true" :model="SearchForm" class="demo-form-inline" style="height: 50px">
            <el-form-item >
                <el-input v-model="SearchForm.goodsname" placeholder="商品名"></el-input>
            </el-form-item>
            <el-form-item>
                <el-date-picker
                        v-model="SearchForm.beginTime"
                        type="date"
                        placeholder="选择创建日期">
                </el-date-picker>
                ——
                <el-date-picker
                        v-model="SearchForm.endTime"
                        type="date"
                        placeholder="选择结束日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="initTable()">查询</el-button>
            </el-form-item>
        </el-form>
        <el-button type="success" @click="addGoods">新增商品</el-button>
        <el-button type="primary" @click="addCount">修改库存</el-button>
        <!--        表格回显-->
        <el-table
                :data="tableData"
                border
                style="width: 100%">
            <el-table-column
                    prop="id"
                    label="编号">
            </el-table-column>
            <el-table-column
                    prop="gname"
                    label="商品名称">
            </el-table-column>
            <el-table-column
                    prop="code"
                    label="商品编码">
            </el-table-column>
            <el-table-column
                    prop="purchaseprice"
                    label="进价">
            </el-table-column>
            <el-table-column
                    prop="sellingprice"
                    label="售价">
            </el-table-column>
            <el-table-column
                    prop="count"
                    label="库存">
            </el-table-column>
            <el-table-column
                    prop="typename"
                    label="商品类型">
            </el-table-column>
            <el-table-column
                    prop="gbname"
                    label="商品品牌">
            </el-table-column>
            <el-table-column
                    prop="gsname"
                    label="商品规格">
            </el-table-column>
            <el-table-column
                    prop="gdname"
                    label="储存方式">
            </el-table-column>
            <el-table-column
                    prop="gmt_create"
                    label="上架时间">
            </el-table-column>
            <el-table-column
                    prop="state"
                    label="商品状态">
                <template slot-scope="scope">
                    <el-button :type="scope.row.state==0?'success':'warning'" plain>{{scope.row.state==1?"停售":"在售" }}</el-button>
                </template>
            </el-table-column>
            <el-table-column
                    align="center"
                    label="操作"
                    width="250px">
                <template slot-scope="scope">
                    <el-button :type="scope.row.state==1?'success':'warning'" @click="zd(scope.row.state,scope.row.id)">{{scope.row.state==0?"下架":"上架" }}</el-button>
                </template>
            </el-table-column>
        </el-table>
<!--        商品上新弹出层-->
        <el-dialog
                title="新品上新"
                :visible.sync="detaileVisiable"
                width="40%">
            <el-form :model="ruleForm" status-icon label-width="100px" class="demo-ruleForm" :rules="rules" ref="ruleForm01">
                <el-form-item label="商品图片" >
                    <el-upload
                            class="avatar-uploader"
                            action="http://192.168.1.42:82/system/tbBusiness/upload"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload"
                            style="width: 400px">
                        <img v-if="ruleForm.img" :src="ruleForm.img" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="商品名称" prop="gname">
                    <el-input v-model="ruleForm.gname" ></el-input>
                </el-form-item>
                <el-form-item label="商品描述" prop="description">
                    <el-input v-model="ruleForm.description" ></el-input>
                </el-form-item>
                <el-form-item label="商品编码" prop="code">
                    <el-input v-model="ruleForm.code"></el-input>
                </el-form-item>
                <el-form-item label="商品类型"  prop="typeId">
                    <el-select v-model="ruleForm.typeId" placeholder="商品类型">
                        <el-option v-for="Type in goodsType" :label="Type.typename" :value="Type.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="存储方式" prop="gdid">
                    <el-select v-model="ruleForm.gdid" placeholder="存储方式">
                        <el-option v-for="storage in goodsStorage" :label="storage.gdname" :value="storage.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="商品规格" prop="gsid" >
                    <el-select v-model="ruleForm.gsid" placeholder="商品规格">
                        <el-option v-for="specificat in goodsSpecificat" :label="specificat.gsname" :value="specificat.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="商品品牌" prop="gbid">
                    <el-select v-model="ruleForm.gbid" placeholder="商品品牌">
                        <el-option v-for="brand in goodsBrand" :label="brand.gbname" :value="brand.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="detaileVisiable = false">关闭</el-button>
                <el-button @click="editAddGoods">提交</el-button>
  </span>
        </el-dialog>
<!--        添加库存弹出层-->
        <el-dialog
                title="商品信息"
                :visible.sync="addCountVisiable"
                width="70%">
            <el-table
                    :data="tableData01"
                    border
                    style="width: 100%">
                <el-table-column
                        prop="id"
                        label="商品编号">
                </el-table-column>
                <el-table-column
                        prop="gname"
                        label="商品名称">
                </el-table-column>
                <el-table-column
                        prop="code"
                        label="商品编码">
                </el-table-column>
                <el-table-column
                        prop="typename"
                        label="商品类型">
                </el-table-column>
                <el-table-column
                        prop="gbname"
                        label="商品品牌">
                </el-table-column>
                <el-table-column
                        prop="gsname"
                        label="商品规格">
                </el-table-column>
                <el-table-column
                        prop="gdname"
                        label="储存方式">
                </el-table-column>
                <el-table-column
                        align="center"
                        label="操作">
                    <template slot-scope="scope">
                        <el-button type="success" @click="addGoodToShop(scope.row.id)">入店</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange01"
                    @current-change="handleCurrentChange01"
                    :current-page.sync=this.currentPage01
                    :page-sizes="pageSizes01"
                    :page-size=pageSize01
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total01">
            </el-pagination>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addCountVisiable = false">关闭</el-button>
  </span>
        </el-dialog>
        <!--        商品入店弹出层-->
        <el-dialog
                title="详细信息"
                :visible.sync="addGoodsToShopVisiable"
                width="30%">
            <el-form :model="addGoodsForm" status-icon label-width="100px" class="demo-ruleForm" :rules="rules02" ref="ruleForm02">
                <el-form-item label="商品进价" prop="purchaseprice">
                    <el-input v-model.number="addGoodsForm.purchaseprice"   ></el-input>
                </el-form-item>
                <el-form-item label="商品售价" prop="sellingprice">
                    <el-input v-model.number="addGoodsForm.sellingprice"   ></el-input>
                </el-form-item>
                <el-form-item label="入店数量" prop="count" >
                    <el-input v-model.number="addGoodsForm.count"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addGoodsToShopVisiable = false">关闭</el-button>
                <el-button @click="editGoodsToShop">提交</el-button>
  </span>
        </el-dialog>
        <!--        分页插件-->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync=this.SearchForm.currentPage
                :page-sizes="pageSizes"
                :page-size=this.SearchForm.pageSize
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>
</template>

<script>
    export default {
        name: "TeacherCenter",
        data(){
            return{
                SearchForm:{
                    currentPage: 1,
                    //每也显示的个数
                    pageSize: 3,
                    beginTime:"",
                    endTime:"",
                    goodsname:""
                },
                rules:{
                    gname: [
                        { required: true, message: '请输入商品名称', trigger: 'blur' },
                        {min:2 , max:10 ,message: '请输入长度在2到10之间的名称',trigger: 'blur'}
                    ],
                    description: [
                        { required: true, message: '请输入商品描述', trigger: 'blur' },
                        {min:2 , max:10 ,message: '请输入长度在2到10之间的描述',trigger: 'blur'}
                    ],
                    code: [
                        { required: true, message: '请输入商品编码', trigger: 'blur' },

                    ],
                    typeId: [
                        { required: true, message: '请选择商品类型', trigger: 'blur' },
                    ],
                    gdid: [
                        { required: true, message: '请选择商品存储方式', trigger: 'blur' },
                    ],
                    gsid: [
                        { required: true, message: '请选择商品规格', trigger: 'blur' },
                    ],
                    gbid: [
                        { required: true, message: '请选择商品品牌', trigger: 'blur' },
                    ],
                },
                rules02:{
                    purchaseprice: [
                        { required: true, message: '请输入商品进价', trigger: 'blur' },
                        {  type: 'number', message: '进价必须为数字值'}
                    ],
                    sellingprice: [
                        { required: true, message: '请输入商品售价', trigger: 'blur' },
                        {  type: 'number', message: '售价必须为数字值'}
                    ],
                    count: [
                        { required: true, message: '请输入入店数量', trigger: 'blur' },
                        {  type: 'number', message: '数量必须为数字值'}
                    ],
                },
                addGoodsForm:{},
                addGoodsToShopVisiable:false,
                currentPage01: 1,
                //每也显示的个数
                pageSize01: 3,
                addCountVisiable:false,
                tableData:{},
                pageSizes:[1,3,5,7],
                //总条数
                total:0,
                pageSizes01:[1,3,5,7],
                //总条数
                total01:0,
                detaileVisiable:false,
                ruleForm:{},
                //商品类型
                goodsType:[],
                //存储方式
                goodsStorage:[],
                //品牌
                goodsBrand:[],
                //商品规格
                goodsSpecificat:[],
                tableData01:[],
                goodsId:0,

            }
        },
        created() {
            this.initTable()
            this.SearchGoodsType()
            this.SearchGoodsBrand()
            this.SearchGoodsSpecificat()
            this.SearchGoodsStorage()
        },
        methods:{

            editGoodsToShop(){
                this.$refs['ruleForm02'].validate((valid) => {
                    if (valid) {
                        this.$http.post("/system/shop/addGoodsToShop/" + this.goodsId, this.addGoodsForm).then(result => {
                            if(this.addGoodsForm.purchaseprice<=0||this.addGoodsForm.count<=0 || this.addGoodsForm.sellingprice<=0){
                                this.$message.error("输入不能为负数或0")
                            }else {
                                if (result.data.code == 2000) {
                                    this.$message.success(result.data.msg);
                                    this.initTable()
                                    this.addGoodsToShopVisiable = false
                                }
                            }
                        })
                    }
                })
            },
            addGoodToShop(id){
                this.addGoodsToShopVisiable = true
                this.goodsId = id
            },
            addCount(){
              this.addCountVisiable = true
              this.$http.post("/goods/goods/findAll/"+this.currentPage01+"/"+this.pageSize01).then(result=>{
                  this.tableData01 = result.data.data.records
                  this.total01 = result.data.data.total;
              })
            },
            editAddGoods(){
                this.$refs['ruleForm01'].validate((valid) => {
                    if (valid) {
                        this.$http.post("/goods/newgoods/addNewGoods", this.ruleForm).then(result => {
                            if (result.data.code == 2000) {
                                this.$message.success(result.data.msg)
                                this.detaileVisiable = false
                                this.initTable()
                            } else {
                                this.$message.error(result.data.msg)
                            }
                        })
                    }
                })
            },
            addGoods(){
              this.detaileVisiable = true
            },
            //查询商品类型
            SearchGoodsType(){
                this.$http.post("/goods/goodsType/select").then(result=>{
                    this.goodsType = result.data.data;
                    console.log(this.goodsType)
                })
            },
            //查询存储类型
            SearchGoodsStorage(){
               this.$http.post("/goods/goodsStorage/select").then(result=>{
                   this.goodsStorage = result.data.data;
               })
            },
            SearchGoodsBrand(){
              this.$http.post("/goods/goodsBrand/select").then(result=>{
                  this.goodsBrand = result.data.data
              })
            },
            SearchGoodsSpecificat(){
                this.$http.post("/goods/goodsSpecification/select").then(result=>{
                    this.goodsSpecificat = result.data.data
                })
            },
            initTable(){
               this.$http.post("/system/shop/findGoodsBySid",this.SearchForm).then(result=>{
                   this.tableData = result.data.data.records
                   this.total = result.data.data.total;
               })
            },
            zd(state,id){
              this.$http.post("/system/shop/updateGoodsState/"+state+"/"+id).then(result=>{
                  if(result.data.code==2000){
                      this.$message.success(result.data.msg)
                      this.initTable()
                  }else{
                      this.$message.error("修改状态失败")
                  }
              })
            },
            //分页相关函数
            handleSizeChange(val) {
                this.SearchForm.pageSize = val
                this.initTable();
            },
            handleCurrentChange(val) {
                this.SearchForm.currentPage = val
                this.initTable()
            },
            handleSizeChange01(val) {
                this.pageSize01 = val
                this.addCount()
            },
            handleCurrentChange01(val) {
                this.currentPage01 = val
                this.addCount()
            },
            handleAvatarSuccess(res,file){
                this.ruleForm.img = res.data
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
        }
    }
</script>

<style >

</style>